<template>
	<div>
		<el-dialog title="调整会员余额" :visible.sync="dialogVisible" width="750px" :close-on-click-modal="false" @close="close">
			<div v-loading="dialogLoading" class="dialog-edit-balance flexRBS" element-loading-text="调整中">
				<!-- 会员信息 -->
				<div class="dialog-l">
					<ul class="info-avatar">
						<li class="avatar"><img v-if="vipDetail.headImg" :src="vipDetail.headImg" alt /></li>
						<li class="name app-line-one">{{ vipDetail.customerName ? vipDetail.customerName : '' }}</li>
					</ul>
					<div class="info-content"><info-list-card :data="balanceCard" /></div>
				</div>

				<!-- 表单 -->
				<div class="dialog-r">
					<el-form ref="form" :model="form" :rules="rules" label-width="140px" class="demo-ruleForm">
						<el-form-item>
							<el-radio v-model="editType" label="充值" />
							<!-- <el-radio v-model="editType" label="扣款" /> -->
						</el-form-item>
						<el-form-item prop="balance" :label="editType == '充值' ? '实充金额(元)' : '扣除实充金额(元)'">
							<el-input v-model="form.balance" :placeholder="`请输入${editType}金额`" maxlength="10" />
						</el-form-item>
						<el-form-item prop="giftBalance" :label="editType == '充值' ? '赠送金额(元)' : '扣除赠送金额(元)'">
							<el-input v-model="form.giftBalance" :placeholder="`请输入${editType}金额`" maxlength="10" />
						</el-form-item>
						<el-form-item prop="remark" :label="editType == '充值' ? '充值备注' : '扣款备注'">
							<el-input v-model="form.remark" type="textarea" placeholder="请输入备注信息" maxlength="50" show-word-limit :autosize="{ minRows: 2, maxRows: 10 }" />
						</el-form-item>
					</el-form>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" round @click="hide">取 消</el-button>
				<el-button size="small" round type="primary" @click="handleSubmit('form')">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { addVipAccountBalance, reduceVipAccountBalance } from '@/api/vip';
import {addBalance} from '@/api/UserCenter'
import { validateMoney, validateStrLen } from '@/utils/validate.js';
export default {
	props: {
		vipDetail: {
			type: Object,
			require: true
		}
	},
	data() {
		/**
		 * 表单校验方法相关
		 */
		// 实充余额
		const validateBalance = (rule, value, callback) => {
			if (value === '') {
				callback(new Error(`请输入${this.editType}金额，无需调整则输入0`));
			} else if (!validateMoney(value, true)) {
				callback(new Error('请输入0或正整数，正小数（小数位不超过2位）'));
			} else if (value - 999999.99 > 0) {
				callback('超过限额999999.99');
			} else if (this.editType === '扣款' && value - (this.vipDetail.balance - this.vipDetail.rechargeLock) / 100 > 0) {
				callback(new Error('不得大于可用实充余额'));
			} else {
				callback();
			}
		};

		// 赠送余额
		const validateGiftBalance = (rule, value, callback) => {
			if (value === '') {
				callback(new Error(`请输入${this.editType}金额，无需调整则输入0`));
			} else if (!validateMoney(value, true)) {
				callback(new Error('请输入0或正整数，正小数（小数位不超过2位）'));
			} else if (value - 999999.99 > 0) {
				callback('超过限额999999.99');
			} else if (this.editType === '扣款' && value - (this.vipDetail.giftBalance - this.vipDetail.giftLock) / 100 > 0) {
				callback(new Error('不得大于可用赠送余额'));
			} else {
				callback();
			}
		};
		// 备注
		const validateRemarks = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入备注'));
			} else if (!validateStrLen(value, 60)) {
				callback(new Error('长度不超过30个汉字或60个字符'));
			} else {
				callback();
			}
		};
		return {
			/**
			 * 表单校验字段相关
			 */
			rules: {
				balance: [{ required: true, validator: validateBalance, trigger: 'blur' }],
				giftBalance: [{ required: true, validator: validateGiftBalance, trigger: 'blur' }],
				remark: [
					{
						required: true,
						validator: validateRemarks,
						trigger: ['blur', 'change']
					}
				]
			},
			// 配置
			dialogVisible: false,
			dialogLoading: false,
			resolve: null,
			reject: null,
			// 数据
			balanceCard: [
				// { name: '总余额', value: 0 },
				// { name: '冻结实充余额', value: 0 },
				// { name: '可用实充余额', value: 0 },
				// { name: '冻结赠送余额', value: 0 },
				// { name: '可用赠送余额', value: 0 }
				{ name: '总余额', value: 0 },
				{ name: '可用实充余额', value: 0 },
				{ name: '可用赠送余额', value: 0 }
			],
			form: {
				balance: '', // 余额
				giftBalance: '', // 赠送余额
				remark: '' // 说明
			},
			editType: '充值' // 余额弹框修改类型
		};
	},
	watch: {
		editType(val) {
			this.$refs.form.resetFields();
		}
	},
	methods: {
		open() {
			this.show();
			return new Promise((resolve, reject) => {
				this.resolve = resolve;
				this.reject = reject;
			});
		},

		// show() {
		//   console.log(this.vipDetail)
		//   // 余额卡片
		//   // 总余额
		//   this.balanceCard[0].value =
		//       '￥' +
		//       this.$options.filters.parseNumberToThousands(
		//         this.vipDetail.balance + this.vipDetail.giftBalance
		//       )
		//   // 冻结实充余额
		//   this.balanceCard[1].value =
		//       '￥' +
		//       this.$options.filters.parseNumberToThousands(
		//         this.vipDetail.rechargeLock
		//       )
		//   // 可用实充余额
		//   this.balanceCard[2].value =
		//       '￥' +
		//       this.$options.filters.parseNumberToThousands(
		//         this.vipDetail.balance - this.vipDetail.rechargeLock
		//       )
		//   // 冻结赠送余额
		//   this.balanceCard[3].value =
		//       '￥' +
		//       this.$options.filters.parseNumberToThousands(this.vipDetail.giftLock)
		//   // 可用赠送余额
		//   this.balanceCard[4].value =
		//       '￥' +
		//       this.$options.filters.parseNumberToThousands(
		//         this.vipDetail.giftBalance - this.vipDetail.giftLock
		//       )
		//   this.dialogVisible = true
		// },
		show() {
			console.log(this.vipDetail);
			// 余额卡片
			// 总余额
			this.balanceCard[0].value = '￥' + this.$options.filters.parseNumberToThousands(this.vipDetail.totalBalance);
			// 可用实充余额
			this.balanceCard[1].value = '￥' + this.$options.filters.parseNumberToThousands(this.vipDetail.scBalance);
			// 可用赠送余额
			this.balanceCard[2].value = '￥' + this.$options.filters.parseNumberToThousands(this.vipDetail.giftBalance);
			this.dialogVisible = true;
		},

		close() {
			this.$refs.form.resetFields();
		},

		hide() {
			this.resolve = null;
			this.reject = null;
			this.dialogVisible = false;
		},

		// 提交余额变更
		handleSubmit(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					const h = this.$createElement;
					this.$msgbox({
						title: '温馨提示',
						message: h('p', null, [
							h('div', null, `你确定要对会员${this.vipDetail.customerName ? this.vipDetail.customerName : ''}进行${this.editType}操作：`),
							h('div', null, `${this.editType}实充金额(元)：${this.form.balance}`),
							h('div', null, `${this.editType}赠送金额(元)：${this.form.giftBalance}`)
						]),
						roundButton: true,
						type: 'warning',
						center: true,
						showCancelButton: true,
						confirmButtonText: '确定',
						cancelButtonText: '取消'
					})
						.then(action => {
							this.dialogLoading = true;
							const data = Object.assign({}, this.form);
							// data.memberId = this.vipDetail.id;
							data.pudDomainUserId = this.vipDetail.id;
							data.addRealAccount = this.$math.mul(data.balance, 100, 0);
							data.addGivenAccount = this.$math.mul(data.giftBalance, 100, 0);
							// 充值
							if (this.editType === '充值') {
								addBalance(data)
									.then(res => {
										this.dialogLoading = false;
										this.$notify({
											title: '成功',
											message: '余额充值成功',
											type: 'success',
											duration: 2000,
											offset: 40
										});
										this.resolve && this.resolve();
										this.hide();
									})
									.catch(err => {
										this.dialogLoading = false;
									});
							}

							// 扣款
							if (this.editType === '扣款') {
								reduceVipAccountBalance(data)
									.then(res => {
										this.dialogLoading = false;
										this.$notify({
											title: '成功',
											message: '余额扣款成功',
											type: 'success',
											duration: 2000,
											offset: 40
										});
										this.resolve && this.resolve();
										this.hide();
									})
									.catch(err => {
										this.dialogLoading = false;
									});
							}
						})
						.catch(err => {});
				}
			});
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* 余额弹框 */
.dialog-edit-balance {
	.info-avatar {
		display: flex;
		height: 40px;
		margin: 15px 0;
		li {
			float: left;
			margin-right: 10px;
		}
		.avatar {
			overflow: hidden;
			flex: 0 0 40px;
			height: 40px;
			border-radius: 50%;
			border: 1px solid #e7e7e7;
		}
		.name {
			flex: 1 1 auto;
			height: 40px;
			line-height: 40px;
			font-size: 18px;
			font-weight: bold;
			color: $dark-font-color;
		}
	}
	.info-content {
		margin-left: 45px;
	}
	.dialog-l {
		width: 40%;
	}
	.dialog-r {
		width: 60%;
		border-left: 1px solid #e6e6e6;
	}
}
</style>
